<template>
	<view class="container" :class="[currentTab == 4 ? 'gc' : '']">
		<view class="header fiexd-head">
			<scroll-view scroll-x="true" class="nav" :scroll-left="navScrollLeft" scroll-with-animation="true">
				<view class="u-flex u-row-around">
					<view v-for="(item, index) in navData" :key="index" @click="changeTab(index)" class="nav-item" :class="[currentTab == index ? 'active' : '']"
					 :data-current="index" data-id="1" bindtap="showGoods">
						{{ item.text }}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 	<view class="orange u-flex u-row-center">
			<HMfilterDropdown :menuTop="80"  :filterData="filterData" :defaultSelected ="defaultSelected" :tab="tab" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
		</view>
		<view class="h100"></view> -->
		<view class="u-flex u-row-center u-m-50" v-if="list.length == 0" style="flex-direction: column;">
			<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../static/img/nodata.png"></image>
			<text style="color:#ccc">暂无搜索结果</text>
		</view>
		<view class="list" v-if="currentTab ==4">
			<view class="item" v-for="(item,index) in list" :key="'a'+item.id">
				<view class="item-header" @click="handleClickItem(item)">
					<view class="left">
						<image :src="itemTitle"></image>
						<view class="title">{{item.name}}</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="item-cell">
						<view class="left">
							<image :src="itemAmount"></image>
							<view class="title">合同金额</view>
						</view>
						<view class="right">
							<view class="text amount" v-if="item.demand != undefined">{{item.demand.sjfy}}</view>
						</view>
					</view>
					<view class="item-cell">
						<view class="left">
							<image :src="itemLocation"></image>
							<view class="title">项目地点</view>
						</view>
						<view class="right">
							<view class="text" v-if="item.demand">{{item.demand.region}}</view>
						</view>
					</view>
					<view class="item-cell">
						<view class="left">
							<image :src="itemJF"></image>
							<view class="title">甲方</view>
						</view>
						<view class="right">
							<view class="text">{{item.userName}}</view>
						</view>
					</view>
					<!-- <view class="item-cell">
						<view class="left">
							<image :src="itemYF"></image>
							<view class="title">乙方</view>
						</view>
						<view class="right">
							<view class="text"></view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-wrap" v-else>
			<view v-if="currentTab == 1" @click="detailTeam(item.id)" class="f-list" v-for="(item, index) in list"
			 :key="'b'+index">
				<view class="f-logo" :style="{ backgroundImage: 'url(' + logoMask+ ')' }"><view class="u-line-2" v-if="currentTab ==2">{{item.cardName}}</view><view class="u-line-2" v-else>{{item.name}}</view></view>
			</view>
			<view v-if="currentTab != 1" @click="detailCompany(item.userId)" class="f-list" v-for="(item, i) in list" :key="i">
				<view class="f-logo" :style="{ backgroundImage: 'url(' + logoMask+ ')' }"><view class="u-line-2" v-if="currentTab ==2">{{item.cardName}}</view><view class="u-line-2" v-else>{{item.name}}</view></view>
			</view>
		</view>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	export default {
		components: {
			'HMfilterDropdown': HMfilterDropdown
		},
		data() {
			return {
				itemAmount: this.$mAssetsPath.itemAmount,
				itemJF: this.$mAssetsPath.itemJF,
				itemYF: this.$mAssetsPath.itemYF,
				itemTitle: this.$mAssetsPath.itemTitle,
				itemLocation: this.$mAssetsPath.itemLocation,
				tab: 0,
				currentTab: 0,
				navScrollLeft: 0,
				baseUrl: this.$mConfig.baseUrl,
				iconXs: this.$mAssetsPath.iconXs,
				logoMask: this.$mAssetsPath.logoMask,
				defaultLogo: this.$mAssetsPath.defaultLogo,
				//qy-企业,td-团队,gr-个人,zj-专家,gc-工程
				navData: [{
						id: 1,
						text: '企业',
						type: 'qy'
					},
					{
						id: 2,
						text: '团队',
						type: 'td'
					},
					{
						id: 3,
						text: '个人',
						type: 'gr'
					},
					{
						id: 4,
						text: '专家',
						type: 'zj'
					},
					{
						id: 5,
						text: '工程信息',
						type: 'gc'
					}
				],
				reqBody: {
					index: 1,
					size: 50,
					type: 'qy'
				},
				searchKey: '',
				list: [],
				defaultSelected: [],
				filterData: [{
						name: '全国',
						"type": 'hierarchy',
						"submenu": [],
					},
					{
						"name": '类型',
						"type": 'filter',
						"submenu": [{
							"name": "类型",
							"value": "类型",
							"submenu": [{
									"name": "招标代理",
									"value": "招标代理"
								},
								{
									"name": "房地产开发",
									"value": "房地产开发"
								},
								{
									"name": "工程勘察",
									"value": "工程勘察"
								},
								{
									"name": "工程设计",
									"value": "工程设计"
								},
								{
									"name": "工程监理",
									"value": "工程监理"
								},
								{
									"name": "工程施工管理",
									"value": "工程施工管理"
								},
								{
									"name": "园林景观",
									"value": "园林景观"
								},
								{
									"name": "建筑材料",
									"value": "建筑材料"
								},
								{
									"name": "装饰装修",
									"value": "装饰装修"
								},
								{
									"name": "机械配套",
									"value": "机械配套"
								},
								{
									"name": "物流仓储",
									"value": "物流仓储"
								},
								{
									"name": "劳务",
									"value": "劳务"
								},
								{
									"name": "工业设计",
									"value": "工业设计"
								},
								{
									"name": "教育培训",
									"value": "教育培训"
								},
								{
									"name": "法律服务",
									"value": "法律服务"
								},
								{
									"name": "金融保险",
									"value": "金融保险"
								}
							]
						}]
					},
					{
						name: '排序',
						"type": 'sort',
						"submenu": [],
					},
				],
			};
		},
		//导航输入框
		onNavigationBarSearchInputClicked() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.search
			});
		},
		onLoad(options) {
			console.log("options", options);
			if (options.keyword) {
				this.searchKey = JSON.parse(decodeURIComponent(options.keyword));
				this.initPage();
			}
			this.getFilterData();
		},
		methods: {
			handleClickItem(item){
				
			},
			//接收菜单结果
			async confirm(e) {
				// this.indexArr = e.index;
				console.log(e);
				// this.valueArr = e.value;	
				if (e.index == '' || e.index == undefined) {
					this.reqBody.searchType = this.filterData[1]['submenu'][0]['submenu'][e.index].value;
				} else {
					delete this.reqBody.searchType;
				}

				if (e.value != undefined) {
					if (e.value[0][0] == '全国') {
						delete this.reqBody.area;
					} else {
						this.reqBody.area = e.value[0][0];
					}
				}
				let result = await this.$apis.fetchGroup(this.reqBody);
				let list = [];
				list[this.tab] = result.data.content;
				this.list = list;
			},
			//修改选中项-示例
			changeSelected() {
				this.defaultSelected = [];
				this.$nextTick(() => {
					this.defaultSelected = [
						[null, null],
						[
							[0],
							[1, 2, 7],
							[1, 0]
						]
					];
				})
			},
			async getFilterData() {
				let result = await this.$apis.fetchArea({
					level: 2
				});
				let filterData = this.filterData;
				let data = [{
					"name": '全国',
					"value": "全国",
					"submenu": [{
						"name": "全国",
						"value": "全国"
					}]
				}];

				filterData[0].submenu = data.concat(result.data);
				this.filterData = filterData;
				console.log(this.filterData);
			},
			detailCompany(e) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.releaseNumber,
					query: {
						id: e
					}
				});
			},
			detailTeam(e){
				this.$mRouter.push({
					route:this.$mRoutesConfig.teamPage,
					query:{
						id:e
					}
				});
			},
			async initPage() {
				if (this.searchKey) this.reqBody.searchKey = this.searchKey;
				let result = await this.$apis.indexSearch(this.reqBody);
				this.list = result.data;
			},
			changeTab(index) {
				this.currentTab = index;
				this.getList();
			},
			async getList() {
				if (this.searchKey) this.reqBody.searchKey = this.searchKey;
				this.reqBody.type = this.navData[this.currentTab].type;
				let result = await this.$apis.indexSearch(this.reqBody);
				this.list = result.data;
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #ffffff;		
	}
	.container {padding-top: 85rpx;}
	.gc {
		background-color: #f4f4f4;}
	.h100 {
		height: 100rpx;
	}

	.list {
		width: 100%;
		padding: 20rpx 20upx;
		position: relative;
		z-index: 1;

		.item {
			margin-bottom: 20upx;
			background-color: #fff;
			border-radius: 20upx;

			.content {
				flex: 1;
				justify-content: space-between;
				display: flex;
				flex-direction: column;
				padding: 10upx 0;

				.item-cell {
					height: 65upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 0 0 22upx;

					.right {
						.text {
							color: #888D99;
							padding-right: 20upx;
						}

						.amount {
							background-color: #FF8F28;
							color: #fff;
							padding: 0 20upx;
							border-radius: 23px 0px 0px 23px;
						}
					}

					.left {
						height: 30upx;
						display: flex;

						.title {
							font-size: 30upx;
							line-height: 30upx;
							margin-left: 30upx;
							color: #4B9CFF;
						}

						image {
							width: 30upx;
							height: 30upx;
						}
					}
				}
			}

			.item-header {
				height: 73upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 22upx;
				border-bottom: #DADFED solid 1upx;

				.left {
					height: 30upx;
					display: flex;

					.title {
						font-size: 30upx;
						line-height: 30upx;
						margin-left: 30upx;
					}

					image {
						width: 30upx;
						height: 30upx;
					}
				}
			}

		}
	}

	.orange {
		height: 80rpx;
		background: #FFF2F2;

		.quanguo {
			width: 50%;
			text-align: center;
			color: #AB61FF;
		}
	}

	.f-list {
		align-items: center;
		background-color: #fff;
		padding:15rpx 10rpx 15rpx 30rpx;

		.f-logo {
			display: flex;
			text-align: center;
			align-items: center;
			justify-content: center;
			width: 102rpx;
			height: 118rpx;
			background-size: auto 100%;
			background-position: center center;
			background-repeat: no-repeat;

			image {
				width: 102rpx;
				height: 118rpx;
			}
		}

		.f-item {
			.title {
				font-size: 30rpx;
				font-weight: 700;
			}

			.desc {
				font-size: 26rpx;
				color: #888d99;
			}

			.tips text {
				background: #f2f2f7;
				color: #888d99;
				padding: 5rpx 8rpx;
				font-size: 24rpx;
			}
		}
	}

	.sousuo {
		height: 130rpx;
		line-height: 130rpx;
		background: #f0f0f0;
		position: relative;
	}

	.ssbtn {
		position: absolute;
		left: 41%;
		text-align: center;
		z-index: 1;
	}

	.form {
		background-color: #ffffff;

		height: 74rpx;

		border-radius: 10rpx;
	}

	.mytupian {
		image {
			width: 107rpx;
			height: 124rpx;
			background: #ffffff;
			margin-right: 20rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
		}

		.name {
			font-size: 26rpx;
			color: #0d1d36;
		}
	}

	.detail {
		color: #ff9028;
		padding-top: 100rpx;
	}

	.fiexd-head {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		left: 0;
		z-index: 99;
		width: 100%;
		height: 82rpx;
	}

	.header {
		width: 750rpx;
		background: linear-gradient(0deg, #ac62ff, #df62ff);
	}

	.nav {
		width: 100%;
		padding: 15rpx 0 29rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 28rpx;
		white-space: nowrap;
		display: flex;
		justify-content: space-around;

		.nav-item {
			display: inline-block;
			text-align: center;
			color: #fff;
			padding-bottom: 8rpx;

			&.active {
				position: relative;
				font-weight: bold;
				font-size: 28rpx;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 35%;
					right: auto;
					width: 26rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 3rpx;

				}
			}

		}
	}
</style>
